<template>
  <div class="bigBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      <el-breadcrumb-item>设备入库</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row> </el-row>
    <h2>入库记录</h2>

    <el-row :gutter="24">
      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-button type="text" @click="handleAdd" icon="el-icon-plus"
            style="padding: 12px; background-color: #3f3f65; color: white">添加设备</el-button>
        </div>
      </el-col>

      <el-col :span="6">
        <el-input placeholder="请输入名称" v-model="input"></el-input>
      </el-col>

      <el-col :span="7">
        <el-date-picker type="daterange" range-separator="-" start-placeholder="入库起始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-col>

      <el-col :span="2 ">
        <el-button type="primary" class="chaXun" style="background-color: #3f3f65" v-model="input"
          @click="chaGetFacility(input)">查询</el-button>
      </el-col>

      <el-col :span="4">
          <el-button type="primary" style="background-color: white;color: #3f3f65; border-color: #3f3f65;">
            导出Excel<i class="el-icon--right"></i>
          </el-button>
  
      </el-col>
    </el-row>

    <div class="from color">
      <el-table :data="gettersFacilityList" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column label="分类" width="120" header-align="center" align="center">
          <template slot-scope="scope">{{ scope.row.className }}</template>
        </el-table-column>

        <el-table-column label="名称" width="120" header-align="center" align="center">
          <template slot-scope="scope">{{ scope.row.facilityName }}</template>
        </el-table-column>

        <el-table-column label="编码" show-overflow-tooltip width="110" header-align="center" align="center">
          <template slot-scope="scope">{{
            scope.row.facilityEncoding
          }}</template>
        </el-table-column>

        <el-table-column label="单价（元）" show-overflow-tooltip width="110" header-align="center" align="center">
          <template slot-scope="scope">{{ scope.row.facilityPrice }}</template>
        </el-table-column>

        <el-table-column label="数量" show-overflow-tooltip width="110" header-align="center" align="center">
          <template slot-scope="scope">{{ scope.row.facilityAmount }}</template>
        </el-table-column>

        <el-table-column label="规格" show-overflow-tooltip width="110" header-align="center" align="center">
          <template slot-scope="scope">{{
            scope.row.facilitySpecification
          }}</template>
        </el-table-column>

        <el-table-column label="存放地点" show-overflow-tooltip width="110" header-align="center" align="center">
          <template slot-scope="scope">{{ scope.row.storageSite }}</template>
        </el-table-column>

        <el-table-column label="是否唯一" show-overflow-tooltip width="110" header-align="center" align="center">
          <template slot-scope="scope">{{ scope.row.facilitySole }}</template>
        </el-table-column>

        <el-table-column label="入库时间" show-overflow-tooltip width="110" header-align="center" align="center">
          <template slot-scope="scope">{{ scope.row.facilityTime }}</template>
        </el-table-column>

        <el-table-column label="操作" show-overflow-tooltip header-align="center" align="center" width="220" fixed="right">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑信息" placement="top">
              <el-button btn-id="id" @click="
                dialogFormVisibleFacility1 = true;
              showFacilityUpdate(scope.row);
                                                                " type="primary" icon="el-icon-edit" circle></el-button>
            </el-tooltip>

            <el-button type="danger" icon="el-icon-delete" @click="facilityDelete(scope.row.id)" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination background layout="prev, pager, next" :total="limit" class="pag">
    </el-pagination>

    <!-- 添加选项模态框 -->
    <el-dialog title="新增设备" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" class="detailsLi" ref="addForm">
        <el-form-item>
          <span>请选择分类:</span>
          <el-select style="width: 150px" center v-model="addForm.classId" prop="classId">
            <span v-for="item in getFacilityClassList">
              <el-option :label="item.className" :value="item.id"></el-option>
            </span>
          </el-select>
        </el-form-item>

        <el-form-item prop=" facilityName">
          <span>设备名称:</span>
          <el-input placeholder="设备名称" style="width: 150px" v-model="addForm.facilityName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="facilityEncoding">
          <span>编码:</span>
          <el-input placeholder="编码" style="width: 150px" v-model="addForm.facilityEncoding"
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="facilityPrice">
          <span>单价:</span>
          <el-input placeholder="单价" style="width: 150px" v-model="addForm.facilityPrice" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="facilityAmount">
          <span>数量:</span>
          <el-input placeholder="数量" style="width: 150px" v-model="addForm.facilityAmount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="facilitySpecification">
          <span>规格:</span>
          <el-input placeholder="规格" style="width: 150px" v-model="addForm.facilitySpecification"
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <span>存放地点:</span>
          <el-select style="width: 150px; margin: 10px" center prop="storageSiteId" v-model="addForm.storageSiteId">
            <span v-for="item in getStorageSiteList"> <el-option :label="item.storageSite"
                :value="item.id"></el-option></span>
          </el-select>
        </el-form-item>

        <el-form-item prop="facilitySole">
          <span>是否唯一:</span>
          <el-checkbox label="是" v-model="addForm.facilitySole" value="1"></el-checkbox>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="qxAddModel">取 消</el-button>
        <el-button type="primary" @click="
          dialogFormVisible = false;
        postfacilityAdd();
                                        ">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改选项模态框 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisibleFacility1">
      <el-form :model="modifyForm" class="detailsLi" ref="editFormRef">
        <el-form-item>
          <span>请选择分类:</span>
          <el-select style="width: 150px" center v-model="modifyForm.className" prop="classId">
            <span v-for="item in getFacilityClassList">
              <el-option :label="item.className" :value="item.id"></el-option>
            </span>
          </el-select>
        </el-form-item>

        <el-form-item prop=" facilityName">
          <span>设备名称:</span>
          <el-input placeholder="设备名称" style="width: 150px" v-model="modifyForm.facilityName"
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="facilityEncoding">
          <span>编码:</span>
          <el-input placeholder="编码" style="width: 150px" v-model="modifyForm.facilityEncoding"
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="facilityPrice">
          <span>单价:</span>
          <el-input placeholder="单价" style="width: 150px" v-model="modifyForm.facilityPrice"
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="facilityAmount">
          <span>数量:</span>
          <el-input placeholder="数量" style="width: 150px" v-model="modifyForm.facilityAmount"
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item prop="facilitySpecification">
          <span>规格:</span>
          <el-input placeholder="规格" style="width: 150px" v-model="modifyForm.facilitySpecification"
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <span>存放地点:</span>
          <el-select style="width: 150px; margin: 10px" center prop="storageSiteId" v-model="modifyForm.storageSiteId"
            autocomplete="off">
            <span v-for="item in getStorageSiteList"> <el-option :label="item.storageSite"
                :value="item.id"></el-option></span>
          </el-select>
        </el-form-item>

        <el-form-item prop="facilitySole">
          <span>是否唯一:</span>
          <el-checkbox label="是" v-model="modifyForm.facilitySole" value="1"></el-checkbox>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleFacility1 = false">取 消</el-button>
        <el-button type="primary" @click="
          dialogFormVisibleFacility1 = false;
        facilityUpdate(modifyForm);
                                        ">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import seriveFacility from "./../../serive/seriveFacility";
//引入vuex插件，{mapState,mapActions,mapGetters,mapMutaion}里面是4个参数
//mapActions相当于把store文件里面暴露的actions对象里面的方法引入进来
import { facilityClass } from "@/api/apiFacility";
import { mapGetters, mapActions } from "vuex";
import seriveFacility from "./../../serive/seriveFacility";
export default {
  name: "Facility",
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisibleFacility1: false,
      formLabelWidth: "120px",
      limit: 25,
      page: 1,
      //添加设备参数集合
      addForm: {
        classId: "",
        facilityAmount: "",
        facilityEncoding: "",
        facilityName: "",
        facilityPrice: "",
        facilitySole: "",
        facilitySpecification: "",
        facilityTime: "",
        id: "",
        storageSiteId: "",
      },
      //修改设备参数集合
      modifyForm: {
        classId: "",
        facilityAmount: "",
        facilityEncoding: "",
        facilityName: "",
        facilityPrice: "",
        facilitySole: "",
        facilitySpecification: "",
        facilityTime: "",
        id: "",
        storageSiteId: "",
      },
      //查询参数
      input: "",
    };
  },

  computed: {
    ...mapGetters(["gettersFacilityList", "getStorageSiteList", "getFacilityClassList", "getStorageSiteList"]),
  },

  //页面加载的时候调用methods{}里面async getfacilityList(){}方法
  created() {
    this.getfacilityList({
      limit: this.limit,
      page: this.page,
      name: this.input,
    });
  },

  methods: {
    ...mapActions(["getfacilityList", "storageSite", "facilityClass", "storageSite"]),
    handleAdd() { // 添加模态框
      this.storageSite()
      this.facilityClass().then(res => {
        this.dialogFormVisible = true
      })
    },
    // 设备删除
    async facilityDelete(id) {
      console.log(id);
      let result = await seriveFacility.facilityDelete(id).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message.success("删除成功!");
          this.getfacilityList({
            limit: this.limit,
            page: this.page,
          });

        } else {
          this.$message.error("删除失败！");
        }
      });
      return result;
    },
    qxAddModel() {
      this.dialogFormVisible = false;
      this.$refs["addForm"].resetFields();
    },
    //设备添加
    async postfacilityAdd() {
      console.log(this.addForm, "设备添加");
      let result = await seriveFacility.facilityAdd(this.addForm).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message.success("添加成功!");
            this.getfacilityList({
              limit: this.limit,
              page: this.page,
              name: this.input,
            });
            this.$refs["addForm"].resetFields();
          } else {
            this.$message.error("添加失败！");
            dialogFormVisible = false;
          }
        });
      return result;
    },

    //设备修改之展示
    async showFacilityUpdate(row) {
      this.$message.success("展示成功！");
      console.log(row);
      this.modifyForm.classId = row.classId;
      this.modifyForm.facilityAmount = row.facilityAmount;
      this.modifyForm.facilityEncoding = row.facilityEncoding;
      this.modifyForm.facilityName = row.facilityName;
      this.modifyForm.facilityPrice = row.facilityPrice;
      this.modifyForm.facilitySole = row.facilitySole;
      this.modifyForm.facilitySpecification = row.facilitySpecification;
      this.modifyForm.facilityTime = row.facilityTime;
      this.modifyForm.id = row.id;
      this.modifyForm.storageSiteId = row.storageSiteId;
    },

    //设备修改之修改
    async facilityUpdate(modifyForm) {
      console.log(modifyForm);
      let result = await seriveFacility
        .facilityUpdate(modifyForm)
        .then((res) => {
          console.log(res.data);
        });
      this.getfacilityList({
        limit: this.limit,
        page: this.page,
        name: this.input,
      });
      return result;
    },

    //查询
    async chaGetFacility() {
      console.log(this.input, this.limit, this.page);
      this.getfacilityList({
        limit: this.limit,
        page: this.page,
        name: this.input,
      });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.bigBox {
  margin: 29px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
  min-height: 600px;
}

h2 {
  padding: 10px 0;
}

.from {
  padding: 10px 0;
}

.tu1 {
  width: 100px;
  height: 50px;
}

.shouSuo {
  width: 300px;
  height: 50px;
}

.tu2 {
  width: 50px;
  height: 50px;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
}

.el-icon-upload2 {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}

.el-icon-download {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}

.pag {
  float: right;
}

.detailsLi {
  list-style-type: none;
}
</style>
